<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MaterielDetailInfo</title>
</head>
<body>
<form class="form-horizontal" role="form" style="padding:15px;">
    <div class="form-group">
        <label for="addBOMMatNo" class="col-xs-4 control-label">编号: </label>
        <div class="col-xs-8">
            <input type="text" class="form-control" id="addBOMMatNo" placeholder="默认不输入为+10增长">
        </div>
    </div>
    <div class="form-group">
        <label for="addMatCodeInput" class="col-xs-4 control-label">物料代码(名称): </label>
        <div class="col-xs-8">
            <div class="input-group">
                <input type="text" class="form-control" id="addMatCodeInput" placeholder="请选择物料" readonly="true">
                <span class="input-group-btn"><button id="selectMatBtn" class="btn btn-default" type="button">选择</button> </span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="addBOMMatNum" class="col-xs-4 control-label">数量: </label>
        <div class="col-xs-4" style="position:relative;">
            <input type="text" class="form-control" id="addBOMMatNum" placeholder="">
            <ul class="input-ul" style="position:absolute; top:35px; list-style:none; background:#FFF; border:1px solid #CCCCCC; display:none; padding:10px;z-index: 999;width: 145px">
                <li ></li>
                <li >少量</li>
                <li >大量</li>
                <li >足量</li>
                <li >超量</li>
            </ul>
        </div>
        <div class="col-xs-4">
            <div class="checkbox">
                <label style="font-weight: bold">
                    <input id="addBOMMatNumLock" type="checkbox"> 固定数量
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="addBOMMatUnit" class="col-xs-4 control-label">单位: </label>
        <div class="col-xs-8">
            <div class="input-group">
                <input type="text" class="form-control unit" id="addBOMMatUnit" placeholder="请选择单位" readonly="true">
                <span class="input-group-btn"><button id="selectUnitBtn" class="btn btn-default" type="button">选择</button> </span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="addBOMWeightType" class="col-xs-4 control-label">称量类型: </label>
        <div class="col-xs-8">
            <select class="form-control" id="addBOMWeightType">
                <option value="1" selected="true">正常</option>
                <option value="2">估算</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="materialPrecision" class="col-xs-4 control-label">精度: </label>
        <div class="col-xs-8">
            <div class="input-group">
                <select id="materialPrecision" class="form-control">
                </select>
                <div id="precisionUom" class="input-group-addon"></div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="addBOMWeightMatType" class="col-xs-4 control-label">称料类型: </label>
        <div class="col-xs-8">
            <select class="form-control col-xs-9" id="addBOMWeightMatType">
                <option value="2">主料</option>
                <option value="1" selected="true">辅料</option>
                <option value="3">补偿料</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="addBOMTolType" class="col-xs-4 control-label">误差类型: </label>
        <div class="col-xs-8">
            <select class="form-control col-xs-9" id="addBOMTolType">
                <option value="1" selected="true">绝对值</option>
                <option value="2">百分比</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="addBOMTolMin" class="col-xs-4 control-label">上下限: </label>
        <div class="col-xs-4">
            <input type="text" class="form-control" id="addBOMTolMax" value="0">
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control" id="addBOMTolMin" value="0">
        </div>
    </div>
    <div class="form-group">
        <label for="addBOMformula" class="col-xs-4 control-label">效价计算公式: </label>
        <div class="col-xs-8">
            <textarea type="text" class="form-control" id="addBOMformula" rows="2"></textarea>
        </div>
    </div>
    <div class="form-group" style = "margin-bottom: 0px">
        <div class="col-xs-6" style="text-align: right">
            <button type="button" id="addBomMatSaveBtn" class="btn btn-custom">确定</button>
        </div>
        <div class="col-xs-6" style="text-align: left">
            <button type="button" id="addBomMatCancelBtn" class="btn btn-custom">取消</button>
        </div>
    </div>
</form>
<style>
    .input-ul li.active{ background:#CEE7FF;}
</style>
<script>

    $(function(){
        var inp =  $("#addBOMMatNum");
        var inpul =  $(".input-ul");
        //点击document隐藏下拉层
        $(document).click(function(event){
            if($(event.target).is(inp)){return;}
            if($(event.target).attr("class") == ".input-ul" || $(event.target).is("li")){
                var liVal = $(event.target).text();
                inp.val(liVal);
                blus();
            }else{
                blus();
            }
        })

        function blus(){
            inpul.hide();
        }

        inp.keyup(function(){
            var tex = inp.val();//输入框的值
            inpul.children().each(function(index){
                if(index==0){$(this).text(tex).addClass("active").siblings().removeClass();}
            });
        });

        inp.focus(function(){
            var tex = inp.val();//输入框的值
            inpul.
            show();
        });

        //鼠标点击和悬停LI
        inpul.children().
        hover(function(){
            var indexLi = $(this).index();//获取当前鼠标悬停时的LI索引值;
//            if($(this).index()!=0){
                $(this).addClass("active").siblings().removeClass();
//            }
        })

    });
</script>
</body>
</html>